<template>
  <div class="app-index">
    <!-- 左侧导航 -->
    <div class="app-index-left" v-if="menuStore.isShowMenu">
      <div class="app-name">
        <img src="../assets/image/guohui.png" alt="" />
        智能监室交互终端管理
      </div>
      <el-scrollbar v-loading="loading" :height="'calc( 100% - 55px )'">
        <el-menu ref="menuRef" default-active="" class="el-menu-vertical-demo" unique-opened>
          <template v-for="item in menuStore.leftMenu" :key="item.meta.title">
            <el-menu-item
              v-if="!item.children?.length > 0 && item.meta?.showLink !== false"
              :index="item.meta?.title"
              :class="{ active: menuStore.activeRoute.path == '/home' }"
              style="padding-left: 28rem"
              @click="selectMenu(item.meta?.title, item.path, item.url)"
            >
              <template #title>
                <i class="iconfont icon-shouye2"></i>
                <span> {{ item.meta?.title }}</span>
              </template>
            </el-menu-item>
            <el-sub-menu v-else-if="item.children && item.meta?.showLink !== false" :index="item.meta?.title">
              <template #title>
                <i class="iconfont" :class="item.meta?.icon || 'icon-renyuan3'"></i>
                <span>{{ item.meta?.title }}</span>
              </template>
              <template v-for="subItem in item.children" :key="subItem.meta.title">
                <el-menu-item v-if="subItem.meta?.showLink !== false" :class="{ active: menuStore.activeRoute.label == subItem.meta.title }" :index="subItem.meta?.title" @click="selectMenu(subItem.meta?.title, subItem.path, subItem.url)">
                  <i class="iconfont" :class="subItem.meta?.icon || 'icon-renyuan3'"></i>
                  {{ subItem.meta?.title }}
                </el-menu-item>
              </template>
            </el-sub-menu>
          </template>
        </el-menu>
      </el-scrollbar>
    </div>
    <div class="app-index-right" :style="{ width: menuStore.isShowMenu ? '89%' : '100%' }">
      <template v-if="menuStore.isShowMenu">
        <Header />
        <TopNavigation />
      </template>

      <div class="index-router-wrapper">
        <iframe v-if="menuStore.iframeSrc" :src="menuStore.iframeSrc" ref="iframeRef" width="100%" height="98.5%" frameborder="0"></iframe>
        <router-view v-else v-slot="{ Component }">
          <KeepAlive>
            <component :is="Component" v-if="route.meta && route.meta.keepAlive" />
          </KeepAlive>
          <component :is="Component" v-if="!(route.meta && route.meta.keepAlive)" />
        </router-view>
      </div>
    </div>
  </div>
</template>
<script setup name="appIndex">
import { ref, reactive, onMounted, computed, onBeforeMount, watch, nextTick } from 'vue'
import { stores } from '@/stores/index.js'
import { useRouter, useRoute } from 'vue-router'
import { http, mergeObj } from '@/utils/index.js'
const userStore = stores.useUserStore()
const menuStore = stores.useMenuStore()
const router = useRouter()
const route = useRoute()
const props = defineProps({})
const menuRef = ref()
const loading = ref(false)
const iframeSrc = ref('')
const iframeRef = ref()

watch(
  () => menuStore.activeRouteParent,
  (newVal) => {
    if (newVal.meta?.title) {
      nextTick(() => {
        menuRef.value.open(newVal.meta.title)
      })
    }
  }
)
onMounted(() => {
  if (menuStore.activeRouteParent.meta?.title) {
    menuRef.value.open(menuStore.activeRouteParent.meta.title)
  }
})

//左侧导航菜单
const selectMenu = (label, path, url) => {
  // console.log(label, path)
  //在ifrema里面显示
  if (url) {
    menuStore.iframeSrc = url + '&token=' + userStore.token
    menuStore.setActiveRoute({
      label: label,
      path: menuStore.iframeSrc
    })
    if (path != '/home') {
      const flag = menuStore.topMenu.some((item) => item.label == label)
      if (!flag) {
        menuStore.topMenu.push({
          label: label,
          path: menuStore.iframeSrc
        })
        // menuStore.setTopMenu(menuStore.topMenu)
      }
    }
    return
  } else {
    menuStore.iframeSrc = ''
    menuStore.setActiveRoute({
      label: label,
      path: path
    })
    if (path != '/home') {
      const flag = menuStore.topMenu.some((item) => item.path == path)
      if (!flag) {
        console.log('push')
        menuStore.topMenu.push({
          label: label,
          path: path
        })
        // menuStore.setTopMenu(menuStore.topMenu)
      }
    }
    router.push({
      path: path
    })
  }
}

//通过路由title查找对应的路由
function findByTitle(route, routes) {
  let target = {}
  todo(route.meta.title, routes)
  function todo(title, routes) {
    routes.find((item) => {
      if (item.children?.length > 0) {
        todo(title, item.children)
      } else {
        if (item.meta.title == title) {
          target = item
        }
      }
    })
  }
  return target
}
//合并路由
function mergeRoute(route, routes) {
  route.children = route.children.map((subRoute) => {
    return mergeObj(subRoute, findByTitle(subRoute, routes))
  })
  return mergeObj(route, findByTitle(route, routes))
}
</script>
<style lang="scss" scoped>
.app-index {
  width: 100%;
  height: 100%;
  display: flex;
  .app-index-left {
    // padding: 0 8px;
    // width: 250px;
    width: 11%;
    height: 100%;
    background: #2f4050;
    .app-name {
      position: relative;
      padding-left: 10px;
      height: 55px;
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      display: flex;
      align-items: center;
      background-color: var(--el-color-primary);

      img {
        margin-right: 10px;
        width: 30px;
        height: 32px;
      }
      .home-icon {
        position: absolute;
        color: var(--el-color-primary);
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 25px;
        cursor: pointer;
      }
    }
    ::v-deep(.el-menu) {
      border-right: none;
      .iconfont {
        margin-right: 10px;
        font-size: 18px !important;
        color: #333;
        font-weight: 700;
      }

      .el-sub-menu__title,
      .el-menu-item {
        position: relative;
        font-size: 15px;
        overflow: hidden;
        color: #a7b1c2;
        font-weight: 600 !important;
        background: #2f4050 !important;
        &:hover {
          color: #fff;
        }
        .iconfont {
          color: #fff;
        }
      }
      .el-sub-menu__title span {
        font-weight: 600;
      }
      .el-sub-menu {
        padding-left: 4px;
        border-left: 4px solid transparent !important;
        background: #2f4050 !important;
      }
      .el-sub-menu.is-opened {
        border-left: 4px solid var(--el-color-primary-light-2) !important;
        .el-sub-menu__title,
        .el-menu-item {
          background: #293846 !important;
        }
        .el-sub-menu__title {
          color: #fff !important;
        }
      }

      .el-menu-item.is-active {
        color: #fff !important;

        // background-color: var(--el-color-primary-light-3) !important;
      }
      .el-menu-item.active,
      .el-menu .el-menu-item.active {
        background-color: var(--el-color-primary-light-3) !important;

        color: #fff !important;

        .iconfont {
          color: #fff !important;
        }
      }
    }
  }
  .app-index-right {
    .index-router-wrapper {
      position: relative;
      padding: 10px 10px 0;
      height: calc(100% - 50px - 40px);
    }
  }
}
</style>
